<template>
  <div class="addAccount">
    <van-form
      @submit="onSubmit"
      input-align="right"
      error-message-align="right"
    >
      <van-cell-group inset>
        <!-- <van-field
          v-model="ruleForm.name"
          name="姓名"
          label="姓名"
          disabled
        /> -->
        <van-field
          v-model="result"
          is-link
          readonly
          label="提现方式"
          placeholder="选择提现方式"
          @click="data.showActionSheet = true"
          :rules="[{ required: true, message: '选择提现方式' }]"
        />
        <van-action-sheet
          v-model:show="data.showActionSheet"
          :actions="data.actions"
          @select="onSelect"
        />
        <van-field
          v-model="ruleForm.bankNo"
          name="银行卡号"
          label="银行卡号"
          placeholder="请输入银行卡号"
          v-if="ruleForm.payType&&ruleForm.payType === 3"
          :rules="[{ required: true, message: '请填写银行卡号' }]"
        />

        <van-field
          v-model="ruleForm.bankName"
          v-if="ruleForm.payType&&ruleForm.payType === 3"
          name="开户行"
          label="开户行"
          placeholder="请输入开户行"
          :rules="[{ required: true, message: '请填写开户行' }]"
        />

        <van-field
          name="uploader"
          label="收款码"
          v-if="ruleForm.payType&&ruleForm.payType !== 3"
          :rules="[{ required: true, message: '请上传收款码' }]"
        >
          <template #input>
            <van-uploader
              :after-read="afterRead"
              v-model="data.fileList"
              :max-count="1"
            />
          </template>
        </van-field>
      </van-cell-group>
      <div class="fixed-btn flex-align-center media">
        <van-button
          type="primary"
          native-type="submit"
        >
          提交申请
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref,  onBeforeMount } from "vue"
import { CreateAccount, UploadFile } from "@/config/api"
import { payTypes } from "@/utils/index"
import { showToast, showLoadingToast } from "vant"
import router from "@/config/router"

const ruleForm = ref({
  payType: '',
  name: '',
  bankNo: '',
  bankName: '',
  payUrl: ''
})

const result = ref('');

onBeforeMount(() => {
  ruleForm.value = {
    payType: '',
    name: '',
    bankNo: '',
    bankName: '',
    payUrl: ''
  }
  result.value = ""
  data.value.fileList = []
})


const afterRead = (file) => {
  let data = new FormData()
  data.append("file", file.file)
  UploadFile(data).then(res => {
    ruleForm.value.payUrl = res
    showToast('上传成功')
  })
};

//1 微信  2支付宝 3 银行卡
const data = ref({
  actions: payTypes,
  showActionSheet: false,
  fileList: []
})
const onSelect = (value) => {
  result.value = value.name;
  ruleForm.value.payType = value.value
  data.value.showActionSheet = false;
};
const onSubmit = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  });
  CreateAccount(ruleForm.value).then(() => {
    showToast('新增收款账户成功')
    setTimeout(() => {
      router.go(-1)
    }, 1000);
  })
};
</script>

<style lang="less" scoped>
/deep/ .van-field__label {
  color: #666666;
}
/deep/ .van-cell {
  padding: 0.35rem 0.53rem;
}
.addAccount {
  min-height: 100vh;
  background: #f0f3f8;
  padding-top: 0.53rem;
}

.payQrcode_box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.27rem;
}

.payQrcode_box img {
  width: 4rem;
}
.fixed-btn {
  width: 100%;
  min-height: 2.67rem;
  background: #ffffff;
  box-shadow: 0px 0px 0.21rem 0px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 0.27rem;
  margin: 0 auto;
  .van-button {
    width: 100%;
  }
}
</style>